<template>
  <h3>点检保养计划</h3>
  <!-- 搜索栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-form :model="scmsQuery" inline>
        <el-form-item label="计划编码">
          <el-input v-model="scmsQuery.scmsEncode" placeholder="请输入计划编码"/>
        </el-form-item>
        <el-form-item label="计划名称">
          <el-input v-model="scmsQuery.scmsName" placeholder="请输入计划名称"/>
        </el-form-item>
        <el-form-item label="计划类型">
          <el-select placeholder="全部" style="width:150px" v-model="scmsQuery.scmsType">
            <el-option label="全部" :value="0"/>
            <el-option label="设备点检计划" :value="1"/>
            <el-option label="设备保养计划" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="全部" style="width:150px" v-model="scmsQuery.scmsStatus">
            <el-option label="全部" :value="0"/>
            <el-option label="草稿" :value="1"/>
            <el-option label="已确认" :value="2"/>
            <el-option label="审批中" :value="3"/>
            <el-option label="已审批" :value="4"/>
            <el-option label="已完成" :value="5"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadScms">搜索</el-button>
          <el-button @click="reloadScms">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row>
    <el-col :span="24">
      <el-button type="primary" @click="toAdd">新增</el-button>
      <el-button type="primary" @click="toEdits">修改</el-button>
      <el-button type="primary" @click="toDelete">删除</el-button>
    </el-col>
  </el-row>
  <!-- 数据表 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table
          :data="scms"
          border
          stripe
      ><!-- stripe可以为表格添加斑马纹样式，默认false -->
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="scmsEncode" label="计划编码" width="150" align="center">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.scmsId)" type="primary">{{ scope.row.scmsEncode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="scmsName" label="计划名称" width="150" align="center"/>
        <el-table-column prop="scmsType" label="计划类型" width="150" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.scmsType === 1">设备点检计划</el-tag>
            <el-tag v-else>设备保养计划</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="scmsStart" label="开始日期" width="200" align="center"/>
        <el-table-column prop="scmsEnd" label="结束日期" width="200" align="center"/>
        <el-table-column prop="scmsFrequency" label="频率" width="100" align="center"/>
        <el-table-column prop="scmsStatus" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.scmsStatus === 1">草稿</el-tag>
            <el-tag v-else-if="scope.row.scmsStatus === 2">已确认</el-tag>
            <el-tag v-else-if="scope.row.scmsStatus === 3">审批中</el-tag>
            <el-tag v-else-if="scope.row.scmsStatus === 4">已审批</el-tag>
            <el-tag v-else-if="scope.row.scmsStatus === 5">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="primary" @click="editScms(scope.row.scmsId)">修改</el-button>
              <el-button size="small" type="danger" @click="deleteScms(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 新增点检保养计划弹窗 -->
  <maintain-plan-add :flag="addScms" @cancelAdd="cancelAdd" @addComplete="loadScms"/>
  <!-- 编辑点检保养计划弹窗 -->
  <maintain-plan-edit :scmsId="editScmsId" @cancelEdit="cancelEdit" @editComplete="loadScms"/>
  <!-- 详情点检保养计划弹窗 -->
  <maintain-plan-detail :scmsId="detailScmsId" @cancelDetail="cancelDetail"/>
</template>

<script setup>

// 封装查询条件
import {onMounted, ref} from "vue";

import {ElMessage, ElMessageBox} from "element-plus";
import scmsRequest from "@/api/scms.js";
import MaintainPlanAdd from "@/views/device/maintainPlan-add.vue";
import MaintainPlanEdit from "@/views/device/maintainPlan-edit.vue";
import MaintainPlanDetail from "@/views/device/maintainPlan-detail.vue";

// 封装查询条件
let scmsQuery = ref({});
// 封装查询的结果集合
let scms = ref([]);
// 新增的addScms
let addScms = ref(-1);
// 编辑的editScmsId
let editScmsId = ref(-1);
// 详情的detailScmsId
let detailScmsId = ref(-1);


function showDetail(scmsId) {
  detailScmsId.value = scmsId;
}
function cancelDetail(){
  detailScmsId.value = -1;
}

function toAdd(){
  addScms.value = 1;
}
function cancelAdd(){
  addScms.value = -1;
}
function editScms(scmsId){
  editScmsId.value = scmsId;
}
function cancelEdit() {
  editScmsId.value = -1;
}
function loadScms(){
  scmsRequest.loadScms(scmsQuery.value,res=>{
    scms.value = res.data;
  })
}

function reloadScms(){
  scmsQuery.value.scmsEncode = null;
  scmsQuery.value.scmsName = null;
  scmsQuery.value.scmsType = 0;
  scmsQuery.value.scmsStatus = 0;
  scmsRequest.loadScms(scmsQuery.value,res=>{
    scms.value = res.data;
  })
}
function deleteScms(scms){
  ElMessageBox.confirm(
      '您确定要将设备[' + scms.scmsEncode + ']删除吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    scmsRequest.delete(scms.scmsId, res => {
      ElMessage({
        type: "success",
        message: "操作完成"
      });
      loadScms();
    })
  }).catch(() => {
  });
}

onMounted(()=>{
  loadScms();
})
</script>

<style scoped>

</style>